<template>
  <div class="container">
    <!-- 视频播放区域 -->
    <div class="video-container">
      <video
        id="videoPlayer"
        controls
        autoplay
        muted
        playsinline
        webkit-playsinline
      ></video>
    </div>

    <!-- 聊天区域 -->
    <div class="chat-container">
      
      <!-- 聊天界面，这里可以使用任何聊天库或自定义组件 -->
      <div v-for="message in messages" :key="message.id">
        {{ message.text }}
      </div>
      <!-- 输入区域 -->
      <input v-model="newMessage" placeholder="输入消息" @keyup.enter="sendMessage" />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const videoPlayer = ref(null);
    const messages = ref([]);
    const newMessage = ref('');

    // 视频流地址，根据你的 SRS 配置进行替换
    const streamUrl = 'http://49.232.31.158:1985/rtc/v1/whip/?app=live&stream=livestream';
    
    onMounted(() => {
      if (videoPlayer.value) {
        videoPlayer.value.src = streamUrl;
      }
    });

    const sendMessage = () => {
      if (newMessage.value.trim()) {
        messages.value.push({ text: newMessage.value, id: Date.now() });
        newMessage.value = ''; // 清空输入框
      }
    };

    return {
      videoPlayer,
      messages,
      newMessage,
      sendMessage,
    };
  },
};
</script>

<style>
.container {
  display: flex;
  height: 100vh;
}

.video-container {
  flex: 3;
  overflow: hidden;
}

.chat-container {
  flex: 1;
  padding: 20px;
  background-color: #f0f0f0;
}

video {
  width: 100%;
  height: auto;
}
</style>

<!-- <template>
  <div>
    <iframe
      :src="baiduUrl"
      width="100%"
      height="600"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    const route = useRoute();
    // 获取路由参数
    const session = route.query.session;
    const num = route.query.num;
    const id = route.query.id;
    const pic_bg = route.query.pic_bg;
    var url = "session="+session+"&num="+num+"&id="+id+"&pic_bg="+pic_bg
    
    return {
      baiduUrl: 'http://127.0.0.1:8000/ketang4.html?'+url,
    };
  },
};
</script> -->